@import '../../theme/mixins/mixins.scss';
@import '../../theme/default.scss';

@include b(input) {
  @include e(wrapper) {
    display: flex;
    margin-top: 2px;
    padding-top: 28px;
    padding-bottom: 1px;
  }
  @include e(main) {
    flex: 1;
  }
  @include e(content) {
    position: relative;
    display: flex;
    flex: 1;
    color: $--color-gray-heavy;
    // color: $--color-black;
    &::before {
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 100%;
      border-width: thin 0 0 0;
      border-style: solid;
      border-color: currentColor;
      transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
      content: '';
    }
    &::after {
      position: absolute;
      bottom: -1px;
      width: 100%;
      border-width: thin 0;
      border-style: solid;
      border-color: currentColor;
      transform: scaleX(0);
      transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
      content: '';
    }
  }

  @include m(focus) {
    color: $--color-primary;
    &::after {
      transform: scaleX(1);
    }
  }
  @include m(error) {
    @include e(content) {
      color: $--color-danger;
    }
    @include e(icon) {
      color: $--color-danger;
    }
    @include e(length) {
      color: $--color-danger;
    }
  }

  @include m(disabled) {
    @include e(content) {
      &::before {
        border-style: dashed;
        border-color: $--color-black-light;
      }
    }
    @include e(label) {
      color: $--color-black-light;
    }
    @include e(icon) {
      color: $--color-black-light;
    }
    @include b(input) {
      color: $--color-black-light;
    }
    @include e(errorMessage) {
      color: $--color-black-light;
    }
  }

  @include e(label) {
    position: absolute;
    top: 6px;
    max-width: 90%;
    transform-origin: top left;
    transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
    pointer-events: none;
    @extend %ellipsis;
    @include m(focused) {
      max-width: 133%;
      transform: translateY(-18px) scale(0.75);
    }
  }

  @include e(prefix) {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 6px;
    color: $--color-gray-heavy;
  }

  @include e(suffix) {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 6px;
    color: $--color-gray-heavy;
  }

  @include e(icon) {
    display: flex;
    align-items: center;
    height: 32px;
    margin-right: 6px;
    color: $--color-black;
    @include m(focused) {
      color: $--color-primary;
    }
  }

  @include e(info) {
    display: flex;
    margin-top: 4px;
    @include e(errorMessage) {
      flex: 1;
      color: $--color-danger;
      font-size: 12px;
      @extend %ellipsis;
    }
    @include e(length) {
      color: $--color-black;
      font-size: 12px;
      line-height: 14px;
    }
  }

  @include e(textarea) {
    height: 54px;
    padding-top: 6px;
    resize: none;
  }

  display: block;
  flex: 1;
  width: 100%;
  height: 32px;
  margin: 0;
  padding: 0;
  color: $--color-black-heavy;
  font-family: inherit;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  appearance: none;
  &::placeholder {
    color: $--color-black-light;
  }
}
